<template>
  <div class="storeTest">vuex状态测试页面</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "storeTest",
  data() {
    return {};
  },
  computed: {
    ...mapGetters("testStore",["getterCollector"]),
  },
  created() {},
  mounted() {
    this.testStateGetter();
  },
  methods: {
    testStateGetter() {
      this.$utils.setConsole("测试Store挂载---", this.$store.state.testStore.value1);
      this.$utils.setConsole(
        "测试Getters-正常--",
        this.getterCollector("value1")
      );
      this.$utils.setConsole(
        "测试Getters-异常--",
        this.getterCollector("value3")
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.storeTest {
  background: #bda1ff;

  height: 100%;
  /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的距离属性 width/height*/
  align-self: stretch;
  padding: 10px;
  margin: 2px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>